import React, {useEffect, useState} from 'react';
import pubsub from "pubsub-js";
import FunChildren from '@/components/13- pubsub/FunChildren';


const App = () => {
    /**
     * pubsub
     * 下载：npm install pubsub-js
     * 发布与订阅。它是一个第三方的模块，可以借助该模块实现复杂的参数传递。
     * 发布者
     *     pubsub.publish("消息的名字","荷载的数据"):异步发布
     *     pubsub.publishSync("消息的名字","荷载的数据"):同步发布
     * 订阅者
     *     pubsub.subscribe("消息的名字",function("消息的名字","荷载的数据"){})
     *     pubsub.subscribeOnce("消息的名字",function("消息的名字","荷载的数据"){})
     * 取消订阅：
     *     pubsub.unsubscribe("消息的名字");// 取消订阅
     */
    const [count, setCount] = useState(10)
    // 如果 pubsub.publish 是在组件渲染之后但在下一次渲染之前被调用的，
    // 那么 setCount 调用可能会触发组件的重新渲染，
    // 但此时组件的状态可能还没有被最新的 useState 调用所初始化
    useEffect(() => {
        //  只执行一次。
        pubsub.subscribeOnce("one", (message, payload) => {
            // console.log("message", message); // one
            // console.log("payload", payload); // FunChildren ==> 只修改一次
            // setCount 必须在hooks函数中调用
            setCount(payload)
        })

        pubsub.subscribe("two", (message, payload) => {
            setCount(payload)
            console.log("执行了two")
        })
    }, []);


    return (
        <div>
            <h3>函数组件 ==> 父组件</h3>
            <h5>count ==> {count}</h5>
            <FunChildren></FunChildren>
        </div>
    );
};

export default App;